<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>images slide with position</title>
<script src="../jQuery/jquery_1.4.2.js" type="text/javascript"></script>
<script src="../jQuery/jquery.easing.1.3.js" type="text/javascript"></script>
<style>
#slide_box{width:400px;height:225px;overflow:hidden;border:1px solid red;position:relative;}
img{margin:0px;float:left;}
#nav{position:absolute;right:5px;bottom:5px;z-index:10;}
#nav .nav_num{padding:3px 5px;float:left;margin-right:5px;border:1px solid red;}
.selected{background-color:gray;color:white;}
</style>
</head>

<body>
<div id="slide_box">
	<table id="images" style="position:absolute;left:0px;" cellpadding="0" cellspacing="0">
		<tr><td><img src="../images/p5.jpg" /></td><td><img src="../images/p8.jpg" /></td>
		<td><img src="../images/p51.jpg" /></td><td><img src="../images/p81.jpg" /></td></tr>
	</table>
</div>
</body>
<script>
$(function(){
	var slide = $('#slide_box'),images = $('#images'),img_count = $('#images td').size();
	
	$("<div id='nav'></div>").appendTo('#slide_box');
	$('#images td').each(function(i){$("<div class='nav_num'>"+(i+1)+"</div>").appendTo('#nav')});
	$('.nav_num').eq(0).addClass('selected');
	
	function scroll_fun(){
		var cur_left = parseFloat(images.css('left'));
		go_img(cur_left<-(img_count-2)*400 ? 1 : (-cur_left/400+2));
	}
	var mySlide = setInterval(scroll_fun,2000);
	slide.mouseover(function(){clearInterval(mySlide)});
	slide.mouseout(function(){mySlide = setInterval(scroll_fun,2000)});
	
	function go_img(num){
		var idx_num = num-1;
		$('.nav_num').removeClass('selected').eq(idx_num).addClass('selected');
		images.stop().animate({'left':[(-idx_num*400)+'px','easeInOutBack']},500)
	}
	$('.nav_num').click(function(){go_img($(this).text())})
});
</script>
</html>
